<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>优当阅读</title>
	<link rel="stylesheet" type="text/css" href="../plug/swiper/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="../plug/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../css/style.css">
	<link rel="stylesheet" type="text/css" href="../font/iconfont.css">
</head>
<!-- 注意body的class -->
<body class="bg_gray">
	<!-- 加载层 -->
	<div class="load_contain m_flex_box flex_vc flex_hc">
		<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
   		 	<g fill="none" fill-rule="evenodd">
        		<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
		            <circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="1;0;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;1;0;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;1;0;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;1;0;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;1;0;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;1;0;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;1;0" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		            <circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
		                <animate attributeName="fill-opacity"
		                     begin="0s" dur="1.3s"
		                     values="0;0;0;0;0;0;0;1" calcMode="linear"
		                     repeatCount="indefinite" />
		            </circle>
		        </g>
		    </g>
		</svg>
	</div>
	<!-- 头部 -->
	<nav class="top_nav pos_f">
		<a href="javascript:history.go(-1)" class="top_a nav_left">
			<i class="iconfont icon-left"></i>
		</a>
		<p class="nav_tit">图书详情</p>
		<a href="book_sc.html" class="top_a nav_right">
			<img src="../img/scs.png" class="top_sc">
		</a>
	</nav>
	<div class="padd_top"></div>
	<div class="detail_banner">
		<img src="../img/load.gif" data-original="../img/book.png" class="lazy">
	</div>
	<div class="m_flex_box flex_jz flex_vc book_detail_tit mar_b">
		<p class="book_detail_tit_left">一个少年的笔记</p>
		<p class="book_detail_tit_right">人文社科-心理学</p>
	</div>
	<div class="book_detail_intro_contain mar_b">
		<p class="m_flex_box flex_vc book_detail_intro_tit">
			<i class="iconfont icon-localoffer"></i>
			<span>图书简介</span>
		</p>
		<div class="book_detail_intro">
			华尔街投资人、桥水公司创始人雷·达里奥白手起家40多年的生活与工作原则；比尔·盖茨、张瑞敏、潘石屹、万维钢，吴晓波、傅盛、罗辑思维等倾情推荐；中国金融投资圈诸多高管期盼多年终得上市中文版华尔街投资人、桥水公司创始人雷·达里奥白手起家40多年的生活与工作原则；比尔·盖茨、张瑞敏、潘石屹、万维钢，吴晓波、傅盛、罗辑思维等倾情推荐；中国金融投资圈诸多高管期盼多年终得上市中文版华尔街投资人、桥水公司创始人雷·达里奥白手起家40多年的生活与工作原则；比尔·盖茨、张瑞敏、潘石屹、万维钢，吴晓波、傅盛、罗辑思维等倾情推荐；中国金融投资圈诸多高管期盼多年终得上市中文版
		</div>
	</div>
	<div class="book_detail_other">
		<p class="book_detail_other_tit">喜欢这本书的人还喜欢</p>
		<div class="swiper-container detail_book_swiper">
	        <div class="swiper-wrapper">
	            <a href="book_detail.html" class="swiper-slide">
	            	<img src="../img/book.png">
	            	<p>小王子</p>
	            </a>
	            <a href="book_detail.html" class="swiper-slide">
	            	<img src="../img/book.png">
	            	<p>小王子Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum quae quis cumque provident voluptates cupiditate repellendus, officia labore delectus at animi ducimus non laudantium nisi, reprehenderit, dolores sapiente fugit fuga.</p>
	            </a>
	            <a href="book_detail.html" class="swiper-slide">
	            	<img src="../img/book.png">
	            	<p>小王子</p>
	            </a>
	            <a href="book_detail.html" class="swiper-slide">
	            	<img src="../img/book.png">
	            	<p>小王子</p>
	            </a>
	             <a href="book_detail.html" class="swiper-slide">
	            	<img src="../img/book.png">
	            	<p>小王子</p>
	            </a>
	        </div>
	    </div>
	</div>
	<div style="height: 0.96rem;"></div>
	<div class="bottom_fixed m_flex_box">
		<p class="flex-1 add_scj bottom_fixed_btn m_flex_box flex_vc flex_hc">
			<img src="../img/sc1.png" class="sc_img">
			<span>加入收藏夹</span>
		</p>
		<a href="#" class="flex-1 read_now bottom_fixed_btn">
			<span>立即阅读</span>
		</a>
	</div>
	<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../plug/UI/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="../plug/layui/layui.all.js"></script>
	<script type="text/javascript" src="../plug/lazy/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="../js/clamp.min.js"></script>
	<script type="text/javascript" src="../plug/swiper/js/swiper.jquery.min.js"></script>
	<script type="text/javascript" src="../js/reset_font.js"></script>
	<script type="text/javascript">
	    for(var i = 0;i<$(".recommend_dl_contain").length;i++){
	    	$clamp($(".recommend_intro")[i], {clamp: 3});
	    };
	    var scroll_swiper = new Swiper('.detail_book_swiper', {
	        slidesPerView: 'auto',
	        centeredSlides: false,
	        spaceBetween: 15,
	        grabCursor: true
	    });
	    $(".add_scj").click(function(){
	    	if($(this).hasClass("active")){
	    		$(this).find(".sc_img").attr("src","../img/sc1.png");
	    		$(this).find("span").html("加入收藏夹");
	    		layer.msg("已取消收藏",{time:1500});
	    	}else{
	    		$(this).find(".sc_img").attr("src","../img/ysc.png");
	    		$(this).find("span").html("已收藏");
	    		layer.msg("收藏成功",{time:1500});
	    	}
	    	$(this).toggleClass("active");
	    })
		function lazyImg(){
			$("img.lazy").lazyload({
	      		effect: "fadeIn",
	      		skip_invisible:false,
		    });
		};
		lazyImg();
	</script>
</body>
</html>